<template>
  <div class="booking-list">
    <el-row>
      <seven-date-picker
        :tempDate="tempDate"
        @changeDate="changeDate"
        @reload="reload"
        @getList="getList"
      ></seven-date-picker>
    </el-row>
    <el-row v-for="(flightInfo, index) in flights" :key="index">
      <flight-board :flightInfo="flightInfo"></flight-board>
    </el-row>
    <el-row v-show="isEmpty"
      ><div style="margin:0 auto;height:20px;margin-top:-80px">
        暂无航班QAQ
      </div></el-row
    >
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import FlightBoard from './FlightBoard/Index.vue';
import SevenDatePicker from './SevenDatePicker/Index.vue';
import { FlightInBook } from '@/types/Flight';

export default defineComponent({
  name: 'BookingList',
  components: { FlightBoard, SevenDatePicker },
  props: {
    flights: {
      type: Array,
      required: true,
    },
    tempDate: {
      type: Date,
      default: new Date(),
    },
  },
  setup(props, context) {
    const isEmpty = computed(() => (props.flights.length === 0 ? true : false));
    // const flightInfo: FlightInBook = {
    //   flightId: 'MU123',
    //   planeModel: '波音747',
    //   baggageAllowance: 20,
    //   departureDate: new Date(),
    //   departureTime: new Date(),
    //   departureAirport: '大兴国际机场',
    //   arrivalDate: new Date(),
    //   arrivalTime: new Date(),
    //   arrivalAirport: '上海虹桥机场',
    //   duration: '2小时15分',
    //   constructionCost: 150,
    //   economyPrice: 400,
    //   economyNum: 123,
    //   businessPrice: 800,
    //   businessNum: 20,
    //   firstPrice: 1100,
    //   firstNum: 4,
    // };
    const changeDate = (date: Date) => {
      context.emit('changeDate', date);
    };
    const reload = () => {
      context.emit('reload');
    };
    const getList = () => {
      context.emit('getList');
    };
    return {
      reload,
      getList,
      changeDate,
      // flightInfo,
      isEmpty,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';
.booking-list {
}
</style>
